<template>
    <div>
        <div class="title">
            周末去哪儿
        </div>
        <ul>
            <li class="item border-bottom" v-for="item of list" :key="item.id">
                <div class="item-img-content">
                    <img class="item--img" :src="item.imgUrl" />
                </div>
                <div class="item-info">
                    <p class="item-title">{{item.title}}</p>
                    <p class="item-desc">{{item.desc}}</p>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name: "HomeWeekend",
    props:{
        list:Array
    },
};
</script>
<style lang="stylus" scoped>
@import '~styles/mixins.styl';

.title {
    line-height: 0.8rem;
    background: #eee;
    text-indent: 0.2rem;
}

.item {
   
    .item-img-content{
     overflow :hidden;
     height :0;
     padding-bottom: 37.09%;
    }
    .item--img {
        width: 100%;
    }

    .item-info {
        padding: 0.1rem;

        .item-title {
            ellipsis();
            line-height: 0.54rem;
            font-size: 0.32rem;
        }

        .item-desc {
            ellipsis();
            line-height: 0.4rem;
            color: #ccc;
        }
    }
}
</style>
